<template>
	<view class="page">
		<view class="body">
			<view class="body_cont">
				<view class="body_cont_left">
					商家昵称
				</view>
				<view class="body_cont_right ">
					<view class="">
						{{seller_name}}
					</view>
					<view class="copy_image" @click="copy(seller_name)">
						<image src="../../static/index/copy.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
			</view>
			<view class="body_cont">
				<view class="body_cont_left">
					手机号
				</view>
				<view class="body_cont_right justify-content-start">
					{{seller_phone}}
					<view class="copy_image" @click="copy(seller_phone)">
						<image src="../../static/index/copy.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
			</view>
			<view class="body_cont">
				<view class="body_cont_left">
					我的费率
				</view>
				<view class="body_cont_right">
					{{seller_rates}}
				</view>
			</view>
			<view class="body_cont">
				<view class="body_cont_left">
					收款链接
				</view>
				<view class="body_cont_right hidden">
					{{seller_QR_code}}
				</view>
			</view>
			<view class="body_cont" style="border: none;">
				<view class="body_cont_left">
					收款二维码
				</view>
			</view>
			<view class="img">
				<image :src="seller_QR_code" mode="" class="image"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getIndex
	} from '../../api/my/index.js'
	export default {
		data() {
			return {
				seller_name: "", //商家昵称
				seller_phone: "", //商家手机号
				seller_rates: "", //商家费率
				seller_QR_code: ''
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			// 获取商家店铺信息
			init() {
				getIndex().then(res => {
					this.seller_name = res.data.shop_name;
					this.seller_phone = res.data.mobile;
					this.seller_rates = res.data.rates;
					this.seller_QR_code = res.data.qrcode;
					console.log(res.data.qrcode);
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: function() {
						console.log(e);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;

		.body {

			.body_cont {
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				line-height: 35px;
				border-bottom: 1px solid #b2b2b2;

				.body_cont_left {
					color: #b2b2b2;
				}

				.body_cont_right {
					display: flex;
				}

				.hidden {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 200px;
				}
			}

			.img {
				width: 100px;
				height: 100px;
				display: block;
				margin-left: auto;
				margin-right: auto;
				padding-bottom: 10px;

				.image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>